<template>
  <div id="Content">
    
    <div @click="t">
      <h1>第{{pass}}关</h1>
      <div id="t1">
        <template>
          <span
            :class="select1[0] ? 'success' : item | class_(item, that) "
            
            :style="{ marginTop: first.y, marginLeft: offset(index++) }"
            v-for="(item, index) in first.arr"
            :key="index"
            >{{ item }}</span
          >
        </template>
        <template>
          <span
            :class="select1[1] ? 'success' : item | class_(item, that)"
            :style="{ marginTop: offset(index++), marginLeft: z + 'px' }"
            v-for="(item, index) in first1.arr"
            :key="item"
            >{{ item }}</span
          >
        </template>
        <template>
          <span
            :class="select1[1] ? 'success' : item | class_(item, that)"
            :style="{ marginTop: first2.x, marginLeft: offset1(index++) }"
            v-for="(item, index) in first2.arr"
            :key="item + '1'"
            >{{ item }}</span
          >
        </template>
      </div>
    </div>
    <Select :select_data="select_data" @select="select" />
  </div>
</template>


<script>
import Select from "./Select.vue";
// import {MessageBox} from 'element-ui';
export default {
  name: "Content",
  components: { Select },
  data() {
    return {
      show_data: "",
      //选项
      select_data: [],
      first: {},
      first1: {},
      first2: {},
      //答案
      value: [],
      //存选的答案值,正确即为success
      select1: [],
      //选择序号,从0开始
      num: 0,
      //存第二个成语的位移偏差
      z: 0,
      //存第三个成语的位移偏差
      z1:0,
      //传指向进去，方便filters过滤器访问，data中的数据
      that: {},
      //关数
      pass:1,
      //过滤答案且不重复
      filter_value:[]
    };
  },
  created() {
    this.pass=this.$route.query.id;
    console.log(!isNaN(this.pass))
    this.pass=this.pass&&!isNaN(this.pass)?this.pass:1
    
    this.select_data = [...this.datas2()];
    this.show_data = [...this.datas()];
    this.that = this;
    this.list();
  },
  filters: {
    //过滤类名 yes为被挖空的类名
    class_(item, value, that) {
      //选值后的判断渲染
      if (item === "success" && value) {
        if (value) {
          return "success";
        }
      }
      //第一次渲染
      //查看是否是答案值，是的话就变红且隐藏起来
      const i = that.filter_value.findIndex((value) => value == item);
      that.filter_value[i]='';
      console.log(item);
      
      if (i !== -1) {
        return "yes";
      } else if (!item) {    
           return "yes_null";
      }
      return "no";
    },
  },
  methods: {
    offset(val) {
      return val * 60 + "px";
    },
    offset1(val) {
      console.log(this.z)
      return val * 60 + this.z1 + "px";
    },
    //获取成语
    list() {
      const arr1 = this.show_data[0].split("");
      const arr2 = this.show_data[1].split("");
      const arr3 = this.show_data[2].split("");
      this.first.arr = [...arr1];
      this.first1.arr = [...arr2];
      this.first2.arr = [...arr3];
      this.find(this.first, this.first1);
      this.find(this.first1, this.first2);
      this.luan();
    },
    //找出相同字及其位移计算
    find(obj1, obj2) {
      console.log(obj1);
      for (let i = 0; i < obj1.arr.length; i++) {
        for (let j = 0; j < obj2.arr.length; j++) {
          if (obj1.arr[i] === obj2.arr[j]) {
            if (obj1.x) {
              this.z = parseInt(obj1.x);
            }
            console.log(obj1.x,obj2.x)
            //位移
            obj1.y = j * 60 + "px";
            obj1.x = 0;
            obj1.z = j;
            obj2.x = i * 60 + "px";
            obj2.y = 0;
            obj2.z = i;
            console.log(obj1.x,obj2.x)
            this.z1=this.z-j*60;
            // this.z1=(j-i)*60;
            console.log(i,j)
            console.log(this.z1)
            //存答案值
            this.value.push(obj1.arr[i]);
            /* //存索引
            this.value1.push(j); */
            //存选值
            this.select_data.push(obj1.arr[i]);
            //致空 前一个相同的元素，不知后一个的原因是不让他影响后一个的比较，否则影响位移
            // obj1.arr[i] = null;
            //清空前一个，隐藏后一个，所以类绑定在后一个即可
            obj2.arr[j] = null;
            this.filter_value.push(obj1.arr[i]);
            return;
          }
        }
      }
    },
    //打乱可选项
    luan() {
      const arr = [
        this.select_data[2],
        this.select_data[3],
        this.select_data[1],
        this.select_data[0],
        this.select_data[4],
      ];
      this.select_data = arr;
      console.log(this.select_data);
    },
    t(event) {
      console.log(event.target.offsetTop, event.target.offsetLeft);
    },
    //数据
    datas(){
      const arrAll = [
        //这个有bug，两个可选值不是一样的，过滤样式判断有误
        ["五颜六色", "六六大顺", "大禹治水"],
        ["博采众长","博览群书","奋笔疾书"],
        ["一心一意", "心心相印", "心想事成"],
        ["叶公好龙",'龙飞凤舞','手舞足蹈'],
        ['诚心诚意','心想事成','马到成功'],
        ['称王称霸','霸王别姬','别有天地'],
        ['心慈手软','欺软怕硬','软硬兼施'],
        ['别有洞天','天下太平','欺人太甚'],
      ];
      //0-
      const i=Math.ceil(Math.random()*arrAll.length-1);
      console.log(i)
      return arrAll[i]
    },
    datas2(){
      const arrAll=['洞',"风","不","火","面", "聋", "晴","多","大","功","三","二","灞"];
      const arr=[];
      for(let i=0;i<3;i++){
        const j=Math.ceil(Math.random()*arrAll.length-1);
        arr.push(arrAll[j]);
      }
      console.log(arr)
      return arr
    },
    //响应函数，选出字
    select(value) {
       console.log(value);
      if (value === this.value[this.num]) {
       
        this.select1.push("success");
        this.num++;
        if (this.num === this.value.length) {
          setTimeout(function (that) {
            console.log(that);
            //  return "success";
            alert("恭喜您！进入下一关");
            that.$router.push({name:'game', query:{id: +that.pass+1}})
            that.$router.go(0);
          }, 500,this.that);
          
        }
        
      } else {
         setTimeout(function () {
           alert(value +"字  不是正确答案哦！请您重新选择。");
          }, 300);
        
      }
    },
  },
};
</script>

<style scoped>
#t1 {
  position: relative;
  margin-left: 180px;
}
span {
  cursor: default;
  display: inline-block;
  text-align: center;
  line-height: 60px;
  font-size: 20px;
  width: 60px;
  height: 60px;
  margin-left: 5px;
  /* border: 1px solid #000; */
  box-shadow: 0 0 1px black;
  position: absolute;
}
/*答案隐藏*/
.yes {
  display: none;
}
.yes_null {
  /* box-shadow: 0 0 5px red; */
  border: 1px solid rgb(238, 18, 18);
  background-color: #fff;
   width: 58px;
  height: 58px;
}
.success {
  background-color: greenyellow;
  font-size: 26px;
  z-index: 66;
}
</style>
